<template>
	<view class="container">
		<fu-navbar :title="info.orderType == 0 ? '入库单' : '出库单'" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="bg-f box margin-b-24 padding-lr-24 radius-b">
			<view class="flex border-b-c9 padding-tb-16">
				<view class="flex-1 over-hidden">
					<view class="fs-30 text-ellipsis">{{info.orderCode}}</view>
					<view class="fs-26 color-a text-ellipsis">{{info.operationEmployeeName}} {{info.operationTime}}</view>
				</view>
				<view class="flex-shrink fs-28" style="color: #027DB4;" v-if="info.state == 1">{{info.orderType == 0 ? '待入库' : '待出库'}}</view>
				<view class="flex-shrink fs-28" style="color: #027DB4;" v-else>{{info.orderType == 0 ? '已入库' : '已出库'}}</view>
			</view>
			<view class="padding-tb-16 top fs-28">
				<view class="flex margin-b-24 over-hidden">
					<view class="label flex-shrink">类型：</view>
					<view class="info flex-1 text-ellipsis">{{info.inOutType}}</view>
				</view>
				<!-- <view class="flex margin-b-24 over-hidden">
					<view class="label flex-shrink">关联单据：</view>
					<view class="info text-ellipsis">维修出库</view>
				</view> -->
				<!-- <view class="flex over-hidden">
					<view class="label flex-shrink">仓库：</view>
					<view class="info text-ellipsis">维修出库</view>
				</view> -->
			</view>
		</view>
		<!-- <view class="bg-f box padding-lr-24">
			<view class="flex padding-tb-24 border-b-c9 align-center">
				<image src="../../../static/images/icon32.png" mode="widthFix" class="t-icon margin-r-12"></image>
				<view class="fs-34 text-bold">出库备件</view>
			</view>
			<view class="list">
				<view class="item padding-tb-24" v-for="item in 2">
					<view class="flex align-center justify-between margin-b-24 over-hidden">
						<view class="fs-36 text-bold text-ellipsis flex-1">防跳继电器</view>
						<view class="fs-28 flex-shrink">出库数量：1</view>
					</view>
					<view class="flex">
						<image src="../../../static/images/no-img.png" mode="aspectFill" class="bj-img flex-shrink"></image>
						<view class="right flex-1 over-hidden">
							<view class="flex over-hidden fs-28 margin-b-20">
								<view class="label flex-shrink">编码：</view>
								<view class="flex-1 text-ellipsis">SP00012</view>
							</view>
							<view class="flex over-hidden fs-28 margin-b-20">
								<view class="label flex-shrink">分类：</view>
								<view class="flex-1 text-ellipsis">SP00012</view>
							</view>
							<view class="flex over-hidden fs-28 margin-b-20">
								<view class="label flex-shrink">规格型号：</view>
								<view class="flex-1 text-ellipsis">SP00012</view>
							</view>
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">库位：</view>
								<view class="flex-1 text-ellipsis">SP00012</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="bg-f box padding-lr-24 margin-b-24">
			<view class="flex border-b-c9 padding-tb-24 align-center justify-between">
				<view class="flex align-center">
					<image src="../../../static/images/icon32.png" mode="widthFix" class="t-icon margin-r-12"></image>
					<view class="fs-34 text-bold" v-if="info.state == 1">备件列表</view>
					<view class="fs-34 text-bold" v-else>{{info.orderType == 0 ? '入库列表' : '出库列表'}}</view>
				</view>
				<image src="../../../static/images/icon26.png" class="scan" v-if="info.state == 1" @click="scanClick"></image>
			</view>
			<view class="list">
				<view class="item padding-tb-24" v-for="(item, index) in info.partList" :key="index">
					<view class="flex align-center justify-between margin-b-24 over-hidden">
						<view class="fs-30 text-bold text-ellipsis flex-1">{{item.name}}</view>
						<view class="fs-28 flex-shrink" v-if="info.state == 1&&info.orderType == 1">申请数量：{{item.outApplyNum}}</view>
						<view class="fs-28 flex-shrink" v-else>{{info.orderType == 0 ? '入库数量' : '出库数量'}}：{{item.num}}</view>
					</view>
					<view class="flex over-hidden">
						<image src="../../../static/images/no-img.png" mode="aspectFill" class="bj-img flex-shrink"></image>
						<view class="flex-1 over-hidden info">
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">编码：</view>
								<view class="flex-1 text-ellipsis">{{item.code}}</view>
							</view>
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">分类：</view>
								<view class="flex-1 text-ellipsis">{{item.brand}}</view>
							</view>
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">规格型号：</view>
								<view class="flex-1 text-ellipsis">{{item.specs}}</view>
							</view>
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">仓库：</view>
								<view class="flex-1 text-ellipsis">{{item.warehouse}}</view>
							</view>
							<view class="flex over-hidden fs-28">
								<view class="label flex-shrink">库位：</view>
								<view class="flex-1 text-ellipsis">{{item.locator}}</view>
							</view>
						</view>
						<view class="flex flex-shrink margin-l-12 align-end">
							<view class="flex align-center" v-if="info.state == 1">
								<image src="../../../static/images/jian2.png" class="jian-icon" @click="changeNum(item, index, 'sub')"></image>
								<input class="ipt" readonly v-model="item.num" />
								<image src="../../../static/images/jia2.png" class="jian-icon" @click="changeNum(item, index, 'add')"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-center align-center" style="height: 200rpx;" v-if="info.partList&&info.partList.length == 0">
				<image src="../../../static/empty/no-data.png" mode="widthFix" style="width: 160rpx;"></image>
			</view>
		</view>
		<view class="bg-f box padding-lr-24" v-if="(info.state==1&&info.orderType == 1)||imgList.length > 0">
			<view class="flex padding-tb-24 border-b-c9 align-center">
				<image src="../../../static/images/icon40.png" mode="widthFix" class="t-icon margin-r-12"></image>
				<view class="fs-34 text-bold">拍照记录</view>
			</view>
			<view class="flex flex-wrap padding-tb-24">
				<view class="photo" v-for="(item, index) in imgList" :key="index">
					<image :src="item.url" mode="aspectFill" class="img" @click="previewImg(item)"></image>
					<image src="../../../static/images/close.png" class="close-icon" @click.stop="delImg(item, index)" v-if="info.state == 1"></image>
				</view>
				<view class="photo" v-if="info.state == 1">
					<image src="../../../static/images/icon41.png" class="img" @click="uploadImg"></image>
				</view>
			</view>
		</view>
		<view class="bottom-wrap" v-if="info.state == 1">
			<view class="bottom">
				<view class="btn" @click="submit">出库</view>
			</view>
		</view>
	</view>
</template>

<script>
import UploadImage from '@/common/utils/upload-image.js';
import {UPLOAD_IMAGE_URL, READ_FILE_URL} from '@/common/config.js';
export default {
	data() {
		return {
			imgList: [],
			id: null,
			info: {},
			orderType: ''
		}
	},
	onLoad(option) {
		this.id = option.id || null
		this.orderType = option.orderType || ''
		this.getDetail();
		uni.$on('scanTap', (id, stockId) => {
			this.getScan(id)
		})
	},
	onUnload() {
		uni.$off('scanTap')
	},
	methods: {
		submit() {
			if (!this.info.partList||this.info.partList.length == 0) {
				uni.showToast({
					title: '请添加备件',
					icon: 'none'
				})
				return
			}
			if (this.imgList.length == 0) {
				uni.showToast({
					title: '请上传拍照记录',
					icon: 'none'
				})
				return
			}
			let isPadding = true
			for(let i=0; i<this.info.partList.length; i++) {
				let item = this.info.partList[i]
				if (item.num < item.outApplyNum) {
					isPadding = false
					uni.showModal({
						content: '出库备件数量少于申请数量，是否确认出库',
						success: res => {
							if (res.confirm) {
								this.onConfirm()
							}
						}
					})
					break;
				}
			}
			if (isPadding) {
				this.onConfirm()
			}
		},
		onConfirm() {
			let arr = []
			this.info.partList.forEach(item => {
				let obj = {
					partId: item.id,
					stockId: item.stockId,
					num: item.num
				}
				arr.push(obj)
			})
			let arr2 = []
			this.imgList.forEach(item => {
				arr2.push(item.fileCode)
			})
			this.$api.post(global.apiUrls.insertPartOut, {
				id: this.id,
				data: JSON.stringify(arr),
				fileCodes: arr2.join(',')
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		getDetail() {
			this.$api.post(global.apiUrls.selectPartOrderOne, {
				id: this.id,
				orderType: this.orderType
			}).then(res => {
				console.log(res)
				if (res.data.code == 9100) {
					this.info = res.data.info
					this.info.fileCodes.forEach(item => {
						let obj = {
							url: `${READ_FILE_URL}${item}`,
							fileCode: item
						}
						this.imgList.push(obj)
					})
				}
			})
		},
		changeNum(e, i, type) {
			if (type == 'sub') {
				if (e.num == 0) return
				this.info.partList[i].num--
			} else {
				if (e.num == e.outApplyNum&&this.info.orderType == 1) {
					uni.showToast({
						title: '该备件出库已达上限，请归还。',
						icon: 'none'
					})
				} else {
					this.info.partList[i].num++
				}
			}
			this.$forceUpdate();
		},
		scanClick() {
			let that = this
			// #ifdef APP-PLUS
			// uni.scanCode({
			// 	success: res => {
			// 		console.log(res, 'scan')
			// 		if (res.result.startsWith('EAM_STOCK')) {
			// 			let id = res.result.split('_')[2]
			// 			let stockId = res.result.split('_')[3]
			// 			// this.getPart(id, stockId)
			// 			let isOut = false
			// 			that.info.partList.forEach((item, index) => {
			// 				if (item.id == id) {
			// 					isOut = true
			// 					if (item.num == item.outApplyNum) {
			// 						uni.showToast({
			// 							title: '该备件出库已达上限，请归还。',
			// 							icon: 'none'
			// 						})
			// 					} else {
			// 						that.info.partList[index].num++
			// 					}
			// 				}
			// 			})
			// 			if (!isOut) {
			// 				uni.showToast({
			// 					title: '当前备件不在出库清单中，请归还。',
			// 					icon: 'none'
			// 				})
			// 			}
			// 		}
			// 	}
			// })
			// #endif
			uni.navigateTo({
				url: `/pages/service/scanCode/index?type=out`
			})
		},
		getScan(id) {
			let that = this
			let isOut = false
			that.info.partList.forEach((item, index) => {
				if (item.id == id) {
					isOut = true
					if (item.num == item.outApplyNum) {
						uni.showToast({
							title: '该备件出库已达上限，请归还。',
							icon: 'none'
						})
					} else {
						that.info.partList[index].num++
					}
				}
			})
			if (!isOut) {
				uni.showToast({
					title: '当前备件不在出库清单中，请归还。',
					icon: 'none'
				})
			}
		},
		getPart(id, stockId) {
			let that = this
			this.$api.post(global.apiUrls.selectPartInfo, {
				id: id
			}).then(res => {
				if (res.data.code == 9100) {
					console.log(res.data)
					let data = res.data.info
					data.num = 1
					data.stockId = stockId
					that.info.partList.push(data)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		previewImg(e) {
			uni.previewImage({
				urls: [e.url]
			})
		},
		delImg(e, i) {
			this.imgList.splice(i, 1)
			this.$api.post(global.apiUrls.deleteFile, {
				fileCode: e.fileCode
			}).then(res => {
				if (res.data.code!=9100) {
					uni.showToast({
						title: res.daat.msg,
						icon: 'none'
					})
				}
			})
		},
		uploadImg() {
			uni.chooseImage({
				sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"],
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					new UploadImage(tempFilePaths, {
						complete: (item) => {
							item.forEach(data => {
								let path = `${READ_FILE_URL}${data}`
								let obj = {
									url: path,
									fileCode: data
								}
								this.imgList.push(obj)
							})
							console.log(this.imgList, 2323)
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.radius-b {
	border-radius: 0 0 20rpx 20rpx !important;
}
.top {
	.label {
		width: 170rpx;
	}
}
.box {
	border-radius: 20rpx;
	.t-icon {
		width: 64rpx;
	}
	.scan {
		width: 60rpx;
		height: 60rpx;
	}
}
.list {
	.item {
		.bj-img {
			width: 166rpx;
			height: 166rpx;
			margin-right: 16rpx;
		}
		.label {
			width: 160rpx;
			text-align: right;
		}
		.jian-icon {
			width: 32rpx;
			height: 32rpx;
		}
		.ipt {
			width: 78rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
			border: 1rpx solid #d7d7d7;
			font-size: 28rpx;
			margin: 0 12rpx;
		}
	}
}
.photo {
	position: relative;
	width: 138rpx;
	height: 138rpx;
	margin-right: 24rpx;
	margin-bottom: 16rpx;
	.img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.close-icon {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		z-index: 9;
	}
}
.bottom-wrap {
	height: 150rpx;
	.bottom {
		padding: 24rpx 60rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;
		.btn {
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			background-color: #0f68f0;
			font-size: 34rpx;
			font-weight: bold;
		}
	}
}
// /deep/ uni-input {
// 	min-height: 0;
// }
</style>